<template>
  <div class="logo">
    <div class="logo_img">
      <img src="../../public/img/QQ.png" alt="" />
    </div>
    <span>QQ</span>
  </div>

  <div class="userInfo">
    <input 
      class="num"
      v-model="num" 
      placeholder="QQ号/手机号/邮箱" 
      type="text" 
    />
    <input 
      class="pas" 
      v-model="pas"
      placeholder="输入密码" 
      type="password" 
    />
    <Checkbox icon-size="27" v-model="checked" class="check">
      已阅读并同意服务协议和QQ隐私保护指引
    </Checkbox>
  </div>

  <div :class="isLed() ? 'login led' : 'login' " @click="isLogin">
    <span class="iconfont icon-youjiantou ico"></span>
  </div>

  <div class="more">
    <span>手机号登录</span>
    <span>找回密码</span>
    <span @click="SignIn" style="border: 0"> 新用户注册</span>
  </div>
</template>

<script setup>
  import {ref} from 'vue'
  import {Checkbox, Dialog} from 'vant'
  import {useStore} from 'vuex'
  import {useRouter} from 'vue-router'

  const num = ref()
  const pas = ref()
  const checked = ref(false)
  const store = useStore()
  const router = useRouter()

  const isLogin = () => {
    num.value ? pas.value ? checked.value ? login(num.value, pas.value ) : Dialog.alert({
      message: '请勾选并同意服务协议'
    }) : Dialog.alert({
      message: '请输入密码'
    }) : Dialog.alert({
      message: '请输入QQ号码'
    })
  }

  let hh = true
  const login = (num, pas) => {
    const users = store.state.users
    for(let i = 0; i < users.length; i++){
      if(num*1 === users[i].num && pas*1 === users[i].password){
         router.replace({path:'/message'})
         hh = false
      }
    }
    if(hh){
      Dialog.alert({
      message:'QQ号或密码不正确！'
      })
    }
}

  const SignIn = () => {
    router.push({
      path: '/signin'
    })
  }

  const isLed = () => {
    let a = false
    if (num.value && pas.value) 
    a = true
    return a
  }


</script>

<style scoped>
.logo {
  display: flex;
  width: 100px;
  height: 40px;
  margin: 60px auto 0;
}

.logo_img {
  width: 35px;
  height: 40px;
}

.logo_img img {
  width: 100%;
  height: 100%;
}

.logo span {
  margin-left: 7px;
  font-size: 37px;
  line-height: 40px;
}

.userInfo {
  display: flex;
  flex-direction: column;
  margin: 30px auto 0;
  width: 300px;
  height: 150px;
}

.userInfo .num,.pas {
  height: 40px;
  margin-bottom: 10px;
  border-radius: 25px;
  text-align: center;
  font-size: 18px;
  outline: none;
  border: 0;
  background-color: rgb(236, 239, 239);
}

.check {
  margin: 0 auto;
  font-size: 11px;
}

.login {
  display: flex;
  justify-content: center;
  width: 70px;
  height: 70px;
  margin: 0 auto;
  background-color: rgb(236, 239, 239);
  border-radius: 50%;
}

.led {
  display: flex;
  justify-content: center;
  width: 70px;
  height: 70px;
  margin: 0 auto;
  border-radius: 50%;
  background-color: aqua;
}

.login .ico {
  line-height: 70px;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
}

.more {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%);
  display: flex;
  justify-content: space-between;
  width: 300px;
  height: 20px;
}

.more span {
  width: 99px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-right: 1px solid black;
}
</style>